<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>程续缘</title>
    <meta name="description" content="程续缘XUYN.COM专业的相亲网站,主要针对程序员的一个程序员相亲网站,通向彼此心灵的桥梁">
    <meta name="keywords" content="相亲网,程序员,程续缘,恋爱,程续缘会员登录,程续缘官网">
    <link rel="stylesheet" href="css/bootstrap.css">
	<script src="js/jquery.min.js"  type="text/javascript"></script>
	<script src="js/bootstrap.js" type="text/javascript"></script>	
	<script src="js/holder.js"></script>
    <!-- <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.js" type="text/javascript"></script>
    <script src="https://cdn.bootcss.com/holder/2.9.6/holder.min.js"></script> -->
</head> 
<style type="text/css">

*{ /*通配符  只针对这个案例 不建议使用*/
            padding:0;
            margin:0;
        } 
        html body{
            height: 100%;
        }
       
        body{
            padding:0;
            margin:0;
            font-family: sans-serif;
            background: url('./img/im0.jpg') no-repeat center/100%;
            background-size: 100% 100%;
            
            /* background-size: cover; */
           
        }
        .log{
          position: absolute;
          top:40%;
          left: 20%;
          transform: translate(-50%,-50%);
          width: 400px;
          padding: 40px;
          background:rgba(3, 92, 119, 0.906);
          box-sizing: border-box;
          box-shadow: 0 15px 25px #03576e80;
          border-radius: 10px;
        }
        .log h2{
          margin: 0 0 30px;
          padding: 0;
          color: #fff;
          text-align: center;
        }
        .log .inputBox{
          position: relative;
        }
        .log .inputBox>input{
          width: 100%;
          padding: 10px 0;
          font-size: 16px;
          color: #fff;
          margin-bottom: 30px;
          border: none;
          border-bottom: 1px solid #fff;
          outline: none;
          background: transparent;   
        }
        .log .inputBox>label{
          position: absolute;
          top:0;
          left: 0;
          padding: 10px 0;
          font-size: 16px;
          color: #fff;
          pointer-events: none;
          transition: .5s;

        }
        .log .inputBox>input:focus ~ label,/*Username 停留在输入上面*/
        .log .inputBox>input:valid ~ label{ 
          top: -25px;
          left: 0;
          color: rgba(85, 200, 235, 0.906);
          font-size: 10px;

        }
        
        .wrap{
            position: relative;
            width: 698px;
            height: 400px;
            margin: 100px 50%;
            background: url('img/im0.jpg');           
            perspective: 800px;
        }
        .left,.right{
            position: absolute;
            right: 0;
            top: 0;
            width: 50% ;
            height: 100%;    
           
           }
           .left{
            transform: rotateY(0deg);
            transform-origin: left;
            transform-style: preserve-3d;
            z-index: 1; /*图片向上提一层*/
         
           }
           .left.on{
            transform: rotateY(-180deg); /*图片旋转180度*/
            transition: 2s;  /*设定页面翻转时长*/
            
           }
           
        .prev,.next{
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            height: 100%;   
           
        }
        .prev{
            background: url('img/im0.jpg') no-repeat right top ;
        }
        .next{
            background: url('img/im1.jpg') no-repeat left top ;/*右半张图*/
            transform: translateZ(-1px) scale(-1,1);/*translateZ()逐步移动    scale调整半张图片的翻转 负值实现翻转  -1 为X位置 1为Y位置*/
        }
        .right{
            background: url('img/im1.jpg') no-repeat right top ;/*左半张图*/
        }


  #h-d2{
    margin-top: -190px;
  }
  #h-d2 a{

    margin: 15px 30px 20px 500px;
  }

  .page-header{
    text-align: center;
    /*background-image:url("./src/img/love.jpg");*/
    width: 100%;
    height: 700px;
    line-height: 600px;
    color: black;
    font-size: 48px;
  }
  .f-body{
    margin: 90px auto 50px;
    text-align: center;
    color: #333333;
    font-size: 14px;
  }
  .f-body .city a{
    margin: 0 5px;
    color: black;
  }
  a{
     /* text-decoration: none;  */
     margin: 0px 20px;
  }
  .f-body .city{
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
    margin: 0 auto 30px;
  }
  .link{
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
  }
  .brand{
    padding-top: 10px;
  }


  /*3D轮播图*/
		html,body{
			height: 100%;
		}

    .col-md-10,ul{
				margin: 0;
				padding: 0;}

    .col-md-10{
				/* background-color: #EEEEEE; */
				perspective: 2000px; /* 要使ul能够呈现3D效果，需在ul的父级元素body上添加透视属性*/}
    .col-md-10 ul{
		      width: 280px;
		      height: 407px;
		      transform-style: preserve-3d;
			    position: absolute;
			    bottom: 300px;
			    left: 50%; 
		  transform: rotateX(-10deg) translateX(-100px) rotateY(0deg);
		      animation: rot 60s linear 0s infinite normal; 
		   }

    .col-md-10 ul>li{
				list-style: none;
		        width: 280px;
		        height: 407px;
				box-sizing: border-box;
				border: 2px solid aliceblue;
				background-color: #424242;
				position: absolute;
				top: 0;
				left: 0;
		    }
    .col-md-10 ul>li>img{
					width: 280px;
					height: 407px;
				}
        ul>li>img{
					width: 280px;
					height: 407px;
				}
				ul:hover{  /* ul被覆盖，动画暂停*/
					animation-play-state: paused;
				}
				ul:hover li>img{
					opacity: 0.5;
				}
				ul>li:hover img{
					opacity: 1;
				}


        ul>li:nth-child(1){
			transform:rotateY(0deg) translateZ(600px); 
		}
		ul>li:nth-child(2){
			transform:rotateY(36deg) translateZ(600px); 
		}
		ul>li:nth-child(3){
			transform:rotateY(72deg) translateZ(600px); 
		}
		ul>li:nth-child(4){
			transform:rotateY(108deg) translateZ(600px); 
		}
		ul>li:nth-child(5){
			transform:rotateY(144deg) translateZ(600px); 
		}
		ul>li:nth-child(6){
			transform:rotateY(180deg) translateZ(600px); 
		}
		ul>li:nth-child(7){
			transform:rotateY(216deg) translateZ(600px); 
		}
		ul>li:nth-child(8){
			transform:rotateY(252deg) translateZ(600px); 
		}
		ul>li:nth-child(9){
			transform:rotateY(288deg) translateZ(600px); 
		}
		ul>li:nth-child(10){
			transform:rotateY(324deg) translateZ(600px); 
		}
		@keyframes rot {
                0%{
				transform:rotateX(0deg) rotateY(0deg)
			}
			25%{
				transform:rotateX(10deg) rotateY(180deg)
			}
			50%{
				transform:rotateX(0deg) rotateY(360deg)
			}
			75%{
				transform:rotateX(-10deg) rotateY(540deg)
			}
			100%{
				transform:rotateX(0deg) rotateY(720deg)
			}
		    }

		
        .row .col-md-2{ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}
            .row .col-md-2 img{width: 280px;height: 373px;border-radius: 2px;}
            .row .col-md-2 span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 30px;position:absolute;bottom: 1px;width: 280px;left:14px;font-size:12px;
                        -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;}
            .row .col-md-2:hover {-webkit-transform: scale(1.1); /*1.1放大值*/
                                  -moz-transform: scale(1.1); 
                                  -o-transform: scale(1.1);
                                  -ms-transform: scale(1.1); 
                                   /*  本hover用的是：transform属性；scale是属性下放大；*/   }
            .row .col-md-2:hover span{ opacity:0}

            .logo{
           
            margin: 10px 100px ;
            height: 80px;
            line-height: 80px;
        }
        /* .navbar-brand{
            padding-left: 50px;
        }
        .navbar-pages{
            float: left;
        } */
        /* .page a{
            margin-right: 52px;
            font-weight: 500;
            color: #ffffff;
            font-size: 18px;
            text-decoration: none;
        }       */

    
        
.button1 {
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
}

.button1:hover {background-color: #e7e7e7;}

  </style>

  
<body>
 <!--音乐播放-->
  <!-- <audio src="./mp3/hi我喜欢.mp3" autoplay >
  </audio> -->
  <div class="container-fluid">
      <!--登录-->
      <section > 
        <div class="logo">
            <img src="img/LOGO.png">
        </div>
        <!-- <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-items">
                    <div class="col-lg-2 col-md-2">
                        <a class="navbar-brand" href="#">
                            <img alt="程续缘LOGO" src="img/LOGO.png">
                        </a>
                    </div>                
                  </div>
                </div>          
              </nav> -->
        <div class="log">
          <h2>Login</h2>
          <form>
            <div class="inputBox">
              <input type="username" name="username" required="">
              <label>Username</label>
            </div>
            <div class="inputBox">
                <input type="password" name="" required="">
                <label>Password</label>
              </div>
            <!---- <input type="submit" name="" value="Submit"> 登录-->
              <a role="button" class="btn btn-success btn-lg" href="#">Submit</a>
              <a role="button" class="btn btn-warning btn-lg" href="#">Register</a>
              <!-- <input type="button" name="" value="Register" >注册 -->
          </form>
        </div>
      <div class="wrap" >
        <div class="left">
            <div class="prev"></div>
            <div class="next"></div>
        </div>
        <div class="right">
          
        </div>
     </div>
     <div class="row" style=" margin-top: 200px;"></div>
    </section>
     
    
    <section >
      <div>
        
        <h1 class="page-header">来这里,寻找人生伴侣！</h1>
      </div>
    <div class="row">
       <div class="col-lg-2" style="height: 650px">
        
       <div><h3>海量优质会员</h3>
        <p>1.9亿单身用户，众多类型供你选择</p></div> 
       <div >
        <a role="button" class="btn btn-primary btn-lg" href="#">型男</a>
        <a role="button" class="btn btn-info btn-lg" href="#">靓女</a>
        
        
       </div>
       </div>
     
      <!-- 3D轮播图-->
       <div>
         <div class="col-md-10" style="width: 1500px; height: 650px"  >
            <ul>
                <li><img src="img/mm01.png"></li>
                <li><img src="img/mm02.png"></li>
                <li><img src="img/mm03.png"></li>
                <li><img src="img/mm04.png"></li>
                <li><img src="img/mm05.png"></li>
                <li><img src="img/mm06.png"></li>
                <li><img src="img/mm07.png"></li>
                <li><img src="img/mm08.png"></li>
                <li><img src="img/mm09.png"></li>
                <li><img src="img/mm10.png"></li>		     
              </ul>
     
  
      </div>
  </div>
  </section>
  </div>

  <section>
      <div style=""><h1>成功案例</h1></div>
    <div class="row">        
      <div class="col-md-2"> <img src="./img/01.png" width="250px"><span>程序员俗称码农，似乎与浪漫绝缘了，但在这里我读懂了程序读懂了你。</span> </div>
     <div class="col-md-2"> <img src="./img/02.png" width="250px"><span> 入我相思门，知我相思苦，长相思兮长相忆，短相思兮无穷极</span></div>  
     <div class="col-md-2"> <img src="./img/03.png" width="250px"><span>曾经沧海难为水，除却巫山不是云。取次花丛懒回顾，半缘修道半缘君</span></div>
     <div class="col-md-2"> <img src="./img/04.png" width="250px"><span>try{living();} catch(Exception e){faceTogether();} finally{ours.love++;}  </span></div>
      <!--异常含义:生活中总是出现这样那样的意外,只要我们携手共同面对,最终只会让我们爱的更深  -->
     <div class="col-md-2"> <img src="./img/05.png" width="250px"><span>爱的誓言:"我决定：爱你一万年。忧佳相随，风雨无悔。厮守终生,不离不弃。"</span></div>
     <div class="col-md-2"> <img src="./img/06.png" width="250px"><span>以为这辈子要一个人走,没想到在"程续缘"遇到了你,我愿用一生去守候。</span></div>
    </div>
  </section>   
 
  </div>
</div>
  <div class="f-body container-fluid">
    <div class="city">城市：
      <a target="_blank" href="#">北京</a>
      <a target="_blank" href="#">上海</a>
      <a target="_blank" href="#">广州</a>
      <a target="_blank" href="#">深圳</a>
      <a target="_blank" href="#">重庆</a>
      <a target="_blank" href="#">合肥</a>
      <a target="_blank" href="#">南京</a>
      <a target="_blank" href="#">苏州</a>
      <a target="_blank" href="#">厦门</a>
      <a target="_blank" href="#">成都</a>
      <a target="_blank" href="#">武汉</a>
      <a target="_blank" href="#">长沙</a>
      <a target="_blank" href="#">东莞</a>
      <a target="_blank" href="#">佛山</a>
      <a target="_blank" href="#">宁波</a>
      <a target="_blank" href="#">青岛</a>
      <a target="_blank" href="#">郑州</a>
      <a target="_blank" href="#">温州</a>
      <a target="_blank" href="#">昆明</a>
      <a target="_blank" href="#">无锡</a>
      <a target="_blank" href="#">济南</a>
      <a target="_blank" href="#">沈阳</a>
      <a target="_blank" href="#">大连</a>
      <a target="_blank" href="#">南宁</a>
      <a target="_blank" href="#">天津</a>
      <a target="_blank" href="#">福州</a>
      <a target="_blank" href="#">西安</a>
      <a target="_blank" href="#">杭州</a>
      <a target="_blank" href="#">贵阳</a>
      <a target="_blank" href="#">惠州</a>
      <a target="_blank" href="#">南昌</a>
      <a target="_blank" href="#">石家庄</a>
      <a target="_blank" href="#">太原</a>
      <a target="_blank" href="#">中山</a>
      <a target="_blank" href="#">珠海</a>
      <a target="_blank" href="#">[更多]</a>
    </div>
    <div class="link">
      <a target="_blank" href="">关于我们</a>|
      <a target="_blank" href="">练习我们</a>|
      <a target="_blank" href="">加入我们</a>|
      <a target="_blank" href="">合作伙伴</a>|
      <a target="_blank" href="">意见反馈</a>|
      <a target="_blank" href="">安全中心</a>|
      <a target="_blank" href="">帮助中心</a>|
      <a target="_blank" href="">缘心会员</a>|
      <a target="_blank" href="">缘爱相亲</a>|
      <a target="_blank" href="">情感咨询</a>|
      <a target="_blank" href="">程序缘服务协议</a>|
      <a target="_blank" href="">个人信息保护政策</a>|
    </div>
    <div class="brand">
      <p>品牌：一星期专业婚恋服务  专业：庞大的资深团队  真实：诚信会员验证体系</p>
      <p>客服热线：	400-111-8989（周一至周日：9:00-21:00）客服信箱：<a href="">www.tedu.cn/</a></p>
      <p>违法和不良信息举报  	400-111-8989  举报信箱：<a href="">www.tedu.cn/</a></p>
     
    </div>
    <div class="out-link">
      <a title="AAA级信用企业" target="_blank">
        <img src="./img/AAA.png">
      </a>
      <a title="诚信示范网站" target="_blank">
        <img src="./img/诚信.png">
      </a>
      <a title="违法和不良信息举报中心" target="_blank">
        <img src="./img/举报.jpg">
      </a>
     
    </div>
  </div>
  
  <!--头部JS3D翻页-->
  <script>
      /*避免全局变量污染 加了()内部变量外面调用不了 */
      (function() {
         var oBody = document.querySelector('body'), //用于背景轮播
             oLeft = document.querySelector('.left'),
             oWrap = document.querySelector('.wrap'),
             oPrev = document.querySelector('.prev'),
             oNext = document.querySelector('.next'),
             oRighr= document.querySelector('.right') ; /*获取css3的方法*/
             index=0; //第几张图片 0代表第一张
             isClick= false;//判断图片是否点击
             timer =null; //用于鼠标悬停时 保存值
         oWrap.onmouseenter = function(){ /*鼠标进入事件*/    
             console.log('鼠标移入了')
             clearInterval(timer);// 鼠标进入时 清除了定时器
              this.onclick = change      /*鼠标点击事件*/  
              this.onmouseleave =function(){//鼠标离开事件
                 auto();
              }      
         }
         auto();//函数调用 自动轮播
         //自动轮播函数
         function auto(){
            timer=  setInterval(change,2000);//2000毫秒 定时器
         }
         /*负责图片翻转变化*/
         function change(){    
             if(isClick) return;   //不执行下面的代码直接返回
             isClick=true; //点击成功一次
             index ++;//点击变换下一张图
             index %= 3;
             oLeft.classList.add('on');//添加旋转类名
             document.addEventListener('transitionend',function(){                 
                 oLeft.classList.remove('on');
                 oWrap.style.backgroundImage =                   
                 oPrev.style.backgroundImage = 
                 oBody.style.backgroundImage =       
                 'url("img/im' + index + '.jpg")';//可以写一起
                 oNext.style.backgroundImage = 
                 oRighr.style.backgroundImage =
                 'url("img/im' + (index+1) % 3 + '.jpg")';//可以写一起
                 isClick=false; //点击后执行完毕
             });//addEventListener事件监听 transitionend(过渡结束))
           
         }
      })();       
  </script>



      <!--绝对宣传框-->
      <link rel="stylesheet" href="./css/index_header.css">
      <header id="header"> <!-- 用于响应客户端发送的加载页面头部的请求 -->  
 
        <!-- 上半部分 -->
      
        
        <!-- 下半部分全球导航 -->
        <div id="global-nav">
            <div class="global-content">
                <a href="javascript:;">
                    <img src="./首页aaa_files/logo.png">
                </a>
                <ul id="sub-nav">                   
                    <li>
                        <a href="http://www.tmooc.cn/zhuanti.html"><img class="" src="./img/hengfu190908.png"></a>
                          <span class="ccclllbbttn"><button type="button" class="close" style="width: 30px">&times;</button></span>
                       
                    </li> 
                </ul>
            </div>
        </div></header>
    </div>
    <script>
      // function close(){
       // onclick="close(global-nav)"
      //   $("#global-nav").css("display","none");
      // }
      $('.close').click(function(){
        $('#global-nav').hide();
      })
    </script>
</body>
</html>
